<template>
  <div>
    <template v-if="newsCollection && newsCollection.length() > 0">
      <el-row v-for="(item, key) in newsCollection"
              :key="key"
              type="flex"
              class="news-card">
        <el-col :span="4"
                class="news-time"><span>{{item.time}}</span></el-col>
        <el-col :span="20">
          <el-row v-for="(item, key) in item.newsList"
                  :key="key"
                  class="news-card-child">
            <el-col :span="20"
                    class="news-card-child-main">
              <el-row class="news-title">
                <el-col><span>{{item.title}}</span></el-col>
              </el-row>
              <el-row class="news-content">
                <el-col><span>{{item.content}}</span></el-col>
              </el-row>
              <el-row class="news-contact">
                <img src="@/img/news/see.png" /><span>{{item.see}}</span>
                <img src="@/img/news/like.png" /><span>{{item.like}}</span>
                <img src="@/img/news/review.png" /><span>{{item.review}}</span>
              </el-row>
            </el-col>
            <el-col :span="4"
                    class="news-operation">
              <el-button @click="modify(item.newsId)"
                         type="text"
                         class="news-operation-edit"
                         icon="el-icon-edit"
                         circle></el-button>
              <el-button @click="deleted(item.newsId)"
                         type="text"
                         class="news-operation-delete"
                         icon="el-icon-delete"
                         circle></el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
    <el-row v-else>
      <div class="news-card no-data"><span>暂无数据</span></div>
    </el-row>
  </div>
</template>

<style lang="scss">
.news-card {
  background-color: #fff;
  padding: 15px 10px;
}
.no-data {
  text-align: center;
  & > span {
    font-size: 15px;
    color: #272b42;
    line-height: 100px;
  }
}
.news-time {
  padding: 5px 5px 0 10px;
  & > span {
    font-size: 14px;
    color: #272b42;
  }
}
.news-card-child {
  margin: 5px 10px;
  padding: 5px 10px;
  border-radius: 5px;
}
.news-card-child:hover {
  background-color: #f4f7fa;
  & > .news-operation .news-operation-edit {
    color: #2f8aff;
  }
  & > .news-operation .news-operation-delete {
    color: #ca3a3a;
  }
}
.news-card-child-main {
  & > .news-title {
    & > div span {
      font-size: 17px;
      font-weight: 600;
      color: #000;
    }
  }
  & > .news-content {
    margin-top: 10px;
    & > div span {
      font-size: 14px;
      color: #666;
    }
  }
  & > .news-contact {
    margin-top: 2px;
    & > img {
      padding: 0 5px;
    }
    & > span {
      font-size: 12px;
      color: #999;
    }
  }
}
.news-operation {
  margin-top: 14px;
  & > .el-button--text {
    font-size: 20px;
    color: #999;
  }
}
</style>

<script>
import '@/style/common.scss'

export default {
  data() {
    return {
    }
  },
  props: {
    newsCollection: {
      type: Array,
      default: () => { return null }
    }
  },
  methods: {
    deleted(id) {
      this.$emit('newsDeleted', id)
    },
    modify(id) {
      this.$emit('newsModify', id)
    }
  }
}
</script>
